<template>
	<view>
		<view
			style="background: linear-gradient(180deg,#5A53CE, #5A53CE);display: inline-block;width: 750rpx;min-height: 100vh">
			<view :style="{backgroundImage:'url('+$ftpUrl('/tablebg.png')+')'}"
				style="width: 700rpx;background-size: cover;height: 400rpx;margin: auto;position: relative;">
				<view class="u-padding-20 u-font-weight" style="color: #fff;">
					<!-- {{items.current?'棋牌-':'台球-'}} -->
					{{tableInfo.carportName}}
				</view>
				<view class="" style="position: absolute;bottom: 0;left: 0;width: 100%;background: #fff;
				padding: 20rpx;display: flex;justify-content: space-between;border-radius:0 0 20rpx 20rpx ;">
					<view class="u-font-weight u-font-32">押金：￥{{tableInfo.yajin}}</view>
					<view>
						<text class="u-type-warning u-font-34 u-font-weight">￥{{tableInfo.basePrice}}</text>
						<text class="u-font-22"> /{{tableInfo.baseTime}}分钟 </text>
					</view>
				</view>
			</view>



			<view class="" style="padding: 0  20rpx;">
				<view class="u-flex u-row-between">
					<view @click="show=true,isShow='immediateDesk'" class="block">
						<image src="/static//flash_kai.png" style="width:60rpx ;height: 60rpx;"></image>
						<text>立即开台</text>
					</view>
					<view class="block" @click="show=true,isShow='bookDesk'">
						<image src="/static/book_kai.png" style="width:60rpx ;height: 60rpx;"></image>
						<text>预约开台</text>
					</view>
				</view>


				<view class="u-flex u-row-between">
					<view @click="checkCoupond" class="block">
						<image src="/static/yan_kai.png" style="width:80rpx ;height: 60rpx;" mode="widthFix"></image>
						<text>验券开台</text>
					</view>
					<view class="block" @click="vipCard">
						<image src="/static/my_kai.png" style="width:60rpx ;height: 60rpx;"></image>
						<text>会员卡开台</text>
					</view>

				</view>


				<view v-if="vipChargeShow" class="block" @click="$Go('/pages/my/charge?id='+sid)">
					<image src="/static/chongzhi.png" style="width:60rpx ;height: 60rpx;"></image>
					<text>会员充值</text>
				</view>

				<!-- <view class="block" @click="$Go('/pages/my/charge?id='+items.store_id)">
					<image src="/static/chongzhi.png" style="width:60rpx ;height: 60rpx;"></image>
					<text>会员充值</text>
				</view> -->
			</view>


		</view>

		<u-popup v-model="chargeShow" mode="center" border-radius="14">
			<chargeList :sid="sid" v-if="sid"></chargeList>
		</u-popup>


		<u-popup v-model="show" mode="bottom" border-radius="14">
			<immediatelyDesk @ImPay="ImPay" :info="info" :items="tableInfo" v-if="isShow=='immediateDesk'">
			</immediatelyDesk>
			<bookDesk @bookPay="bookPay" :info="info" :items="tableInfo" v-if="isShow=='bookDesk'"></bookDesk>
		</u-popup>

		<u-popup v-model="cardshow" mode="bottom" border-radius="14">
			<scroll-view scroll-y="true" style="height: 500rpx;">
				<card @useCard="useCard" :list="cardList" v-if="cardshow">
				</card>
			</scroll-view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import AntiShake from "@/untils/AntiShake.js";
	import wxpay from '@/common/wxpay.js';
	import bookDesk from './components/bookDesk.vue';
	import immediatelyDesk from './components/immediatelyDesk.vue';
	import card from './components/card.vue';
	import chargeList from './components/chargeList.vue';

	export default {
		components: {
			immediatelyDesk,
			bookDesk,
			card,
			chargeList
		},
		data() {
			return {
				cardList: [],
				chargeShow: false,
				cardshow: false,
				show: false,
				vipChargeShow: false,
				isShow: '',
				id: '',
				info: '',
				tableInfo: '',
				items: "",
				cid: '',
				sid: "",
				Config: ""
			}
		},
		onLoad(options) {
			if (options.cid) {
				this.cid = options.cid
				this.getTable();
			}
			if (options.sid) {
				this.sid = options.sid
				this.storeDetail();
			}

			this.getConfig()
			// if(options.item){
			// 	var item=JSON.parse(options.item);
			// }
		},
		methods: {

			getConfig() {
				this.$u.post('/index/getConfig', {

				}).then(res => {
					if (res.appAuditState == 0) {
						this.chargeShow = true;
						this.vipChargeShow = true;

					} else {
						this.chargeShow = false;
						this.vipChargeShow = false;

					}

				})
			},

			checkCoupond() {
				console.log(this, 33)
				if (this.tableInfo.status == 3) return this.$u.toast("很抱歉，正在装修无法下单");
				this.$Go('/pages/my/getCoupond?sid=' + this.sid + '&cid=' + this.cid)
			},
			useCard(e) {
				this.ImPay(e.id);
				this.cardshow = false
			},

			getTable() {
				this.$u.post('/index/carportDetail', {
					id: this.cid,
				}).then(res => {
					this.tableInfo = res;
				})
			},
			vipCard() {
				this.$u.post('/user/card', {}).then(res => {
					if (!res.length) {
						uni.navigateTo({
							url: "/pages/my/storeCard?id=" + this.sid
						})

						this.$u.toast("暂无会员卡，请购买")
					} else {
						this.cardList = res;
						this.cardshow = true;
						// this.ImPay()
					}
				})
			},
			ImPay: AntiShake.throttle(function(e) {
				{

					// 需要防抖的内容
					this.$u.post('/indent/orderStart', {
						carport_id: this.cid,
						member_card_id: e
					}).then(res => {
						if (Object.prototype.toString.call(res) == "[object Object]") {
							const wx = new wxpay(res);
							wx.pay().then(res => {
								this.$refs.uToast.show({
									title: '开台成功',
									type: 'success',
									callback: () => {
										this.show = false;
										uni.switchTab({
											url: "/pages/my/bookList"
										})
										this.getCarport()
									}
								})
							}).catch(err => {})
						} else if (Object.prototype.toString.call(res) == "[object Array]") {
							this.$refs.uToast.show({
								title: '开台成功',
								type: 'success',
								callback: () => {
									this.show = false;
									uni.switchTab({
										url: "/pages/my/bookList"
									})
									this.getCarport()
								}
							})
						}

					})

				}
			}, 2000),
			storeDetail() {
				this.$u.post('/index/storeDetail', {
					store_id: this.sid,
				}).then(res => {
					this.list = [res];
					this.info = res;
				})
			},
			bookPay(e) {
				this.$u.post("/indent/appointment", {
					carport_id: this.cid,
					time: e
				}).then(res => {
					if (Object.prototype.toString.call(res) == "[object Object]") {
						const wx = new wxpay(res);
						wx.pay().then(res => {
							this.$refs.uToast.show({
								title: '预约成功',
								type: 'success',
								callback: () => {
									this.show = false;
									this.getCarport()
								}
							})
						}).catch(err => {})
					} else if (Object.prototype.toString.call(res) == "[object Array]") {
						this.$refs.uToast.show({
							title: '预约成功',
							type: 'success',
							callback: () => {
								this.show = false;
								this.getCarport()
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.block {
		background: #403A99;
		width: 45%;
		border-radius: 10rpx;
		margin-top: 30rpx;
		padding: 40rpx;
		color: #fff;
		display: flex;
		align-items: center;
		text-align: center;

		text {
			margin-left: 20rpx;
		}
	}
</style>